import React from 'react';
import { Card, List, Button, Typography, Empty, Tag, Descriptions } from 'antd';
import { Link, useParams } from 'react-router-dom';
import { AppstoreOutlined, CodeOutlined, MonitorOutlined } from '@ant-design/icons';
import dataService from '../../services/dataService';
import type { Software } from '../../services/dataService';

const { Title, Paragraph } = Typography;
const { Meta } = Card;

const SoftwarePage: React.FC = () => {
  const { id } = useParams<{ id: string }>();

  // 获取分类对应的图标
  const getCategoryIcon = (category: string) => {
    switch (category) {
      case '开发工具':
        return <CodeOutlined style={{ color: '#1890ff' }} />;
      case '浏览器':
        return <MonitorOutlined style={{ color: '#52c41a' }} />;
      case '设计工具':
        return <AppstoreOutlined style={{ color: '#faad14' }} />;
      default:
        return <AppstoreOutlined style={{ color: '#722ed1' }} />;
    }
  };

  // 如果提供了ID，则显示单个软件详情
  if (id) {
    const software = dataService.getSoftwareById(id);
    
    if (!software) {
      return (
        <div className="content-section">
          <Empty description="未找到该软件" />
          <div style={{ marginTop: 24 }}>
            <Button type="primary">
              <Link to="/software">返回列表</Link>
            </Button>
          </div>
        </div>
      );
    }
    
    return (
      <div className="content-section">
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24 }}>
          <div style={{ width: 80, height: 80, borderRadius: 16, backgroundColor: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '32px', marginRight: 16 }}>
            {getCategoryIcon(software.category)}
          </div>
          <div>
            <Title level={2} style={{ marginBottom: 0 }}>{software.name}</Title>
            <Tag color="blue" style={{ marginTop: 8 }}>{software.category}</Tag>
          </div>
        </div>
        
        <Card title="软件详情">
          <Descriptions bordered column={2}>
            <Descriptions.Item label="软件名称">{software.name}</Descriptions.Item>
            <Descriptions.Item label="版本号">{software.version}</Descriptions.Item>
            <Descriptions.Item label="分类" span={2}>
              <Tag color="blue">{software.category}</Tag>
            </Descriptions.Item>
            <Descriptions.Item label="描述" span={2}>
              <Paragraph>{software.description}</Paragraph>
            </Descriptions.Item>
          </Descriptions>
          
          <div style={{ marginTop: 24 }}>
            <Button type="primary" style={{ marginRight: 8 }}>下载</Button>
            <Button>查看官网</Button>
          </div>
        </Card>
        
        <div style={{ marginTop: 24 }}>
          <Button type="primary">
            <Link to="/software">返回列表</Link>
          </Button>
        </div>
      </div>
    );
  }
  
  // 显示软件列表
  const softwareList = dataService.getSoftware();
  
  return (
    <div className="content-section">
      <Title level={2}>常用软件</Title>
      {softwareList.length > 0 ? (
        <List
          grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
          dataSource={softwareList}
          renderItem={(software: Software) => (
            <List.Item>
              <Card
                hoverable
                cover={
                  <div className="software-cover" style={{ height: 150, backgroundColor: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '48px' }}>
                    {getCategoryIcon(software.category)}
                  </div>
                }
                actions={[
                  <Button type="link">
                    <Link to={`/software/${software.id}`}>查看详情</Link>
                  </Button>
                ]}
              >
                <Meta
                  title={<Link to={`/software/${software.id}`}>{software.name}</Link>}
                  description={software.description}
                />
                <div style={{ marginTop: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Tag color="blue">{software.category}</Tag>
                  <Typography.Text type="secondary">v{software.version}</Typography.Text>
                </div>
              </Card>
            </List.Item>
          )}
        />
      ) : (
        <Empty description="暂无常用软件" />
      )}
    </div>
  );
};

export default SoftwarePage;
